<template>
    <view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- 头部 -->
        <view class="bg">
            <u-navbar :fixed="true" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
                :leftIconColor="navbar.bgColor=='transparent'?'#fff':'#151C24'" @leftClick="back"
                title="人员管理" :titleColor="navbar.bgColor=='transparent'?'#fff':'#151C24'"
                rightIcon="search" :rightIconColor="navbar.bgColor=='transparent'?'#fff':'#151C24'" @rightClick="rightClick">
            </u-navbar>
        </view>

        <!-- content -->
        <view class="uni-area">
            <!-- 人员概况统计 -->
            <view class="uni-shadow member-general">
                <qiun-title-bar title="人员概况统计" style="margin:-16rpx 0 0 -20rpx" />
                <view class="u-m-t-20 u-flex u-row-between">
                    <view v-for="(item,index) in memberGeneral" :key="index"
                        class="u-flex u-flex-col ">
                        <view class="u-m-b-20">
                            <text class="u-font-52 font-bold">{{item.value}}</text>
                            <text class="u-font-24">人</text>
                        </view>
                        <text class="u-font-26">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 考勤人数信息 -->
            <view class="u-m-t-40">
                <view class="u-flex u-row-between">
                    <text class="u-font-32 font-bold">考勤人数信息</text>
                    <view class="u-flex" @tap.stop="teamChangeFiltrate.show=true">
                        <text class="u-m-r-16 u-font-26 uni-dec-color">{{teamChangeFiltrate.label}}</text>
                        <u-icon name="arrow-down" size="13" color="#5D6672"></u-icon>
                    </view>
                </view>
                <view class="u-m-t-30 uni-shadow uni-echarts-box">
                    <view style="height:500rpx">
                        <qiun-data-charts type="column" 
                            :ontouch="workerFenbu.isOpts1" :canvas2d="workerFenbu.isOpts1"
                            :opts="workerFenbu.isOpts1?workerFenbu.opts1:workerFenbu.opts" 
                            :chartData="workerFenbu" />
                    </view>
                </view>
            </view>

            <!-- 应用功能 -->
            <view class="u-m-t-40" v-if="uses.usesShow">
                <text class="u-font-32 font-bold">应用功能</text>
                <view class="u-m-t-30 u-flex u-flex-wrap u-row-between">
                    <view v-for="(item,index) in uses.list" :key="index" class="u-m-b-20 use-item" @tap.stop="menuSkip(item)">
                        <u--image class="img" width="354rpx" height="134rpx" :src="item.bg"></u--image>
                        <text class="text u-font-28 uni-inverse-color">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 人员列表 -->
            <view class="u-m-t-40">
                <text class="u-font-32 font-bold">人员列表</text>
                <!-- 下拉筛选 -->
                <uni-select class="u-m-t-30" ref="uniselect" :selectData="selectData" @select="select"></uni-select>
                <uni-item-member-plus class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" 
                    :listItem="tem"  @memberDetail="memberDetail(tem.id)" />
            </view>
            
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 班组长变更筛选 -->
        <u-picker :show="teamChangeFiltrate.show" :columns="teamChangeFiltrate.data" keyName="label" 
            :closeOnClickOverlay="true" @cancel="teamChangeFiltrate.show=false" @close="teamChangeFiltrate.show=false" 
            @confirm="teamChangeSelect">
        </u-picker>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data(){
        return{
            // navbar
            navbar:{
                bgColor: 'transparent',
                shadow: false,
            },
            // 用户信息
            userInfo: uni.getStorageSync("userInfo"),
            parameter:{
                deptId: null, // 所属部门编号
                gcbh: null // 所属项目(工程)编号
            },
            // 人员概况
            memberGeneral:[
                { field:'smzrs', title:'实名制人数', icon:'/static/home/data1.png', value:'0' }, // staffs
                { field:'wstaffs', title:'待进场工人数', icon:'/static/home/data2.png', value:'0' },
                { field:'istaffs', title:'进场人数', icon:'/static/home/data3.png', value:'0' },
                { field:'ostaffs', title:'离场人数', icon:'/static/home/data4.png', value:'0' },
            ],
            // 班组长变更信息筛选数据 及 班组长变更信息
            teamChangeFiltrate:{
                show: false,
                label: '6个月',
                value: 6,
                data: [
                    [
                        { label: '6个月', value: 6 },
                        { label: '12个月', value: 12 } 
                    ]
                ],
            },
            workerFenbu:{
                categories:[],
                series:[],
                opts:{ 
                    extra:{ 
                        column: { width:20 } 
                    }
                },
                isOpts1: false,
                opts1:{
                    extra:{ column:{width:20} },
                    enableScroll: true, xAxis: { scrollShow:true, itemCount:5, disableGrid:true } 
                }
            },
            // 应用功能
            uses:{
                usesShow: true,
                list:[
                    { bg:'/static/member/bg1.png', title:'实名认证', url:'/pages/common/add?type=autonym' },
                    { bg:'/static/member/bg2.png', title:'进场', url:'/pages/common/add?type=enter' }, 
                    { bg:'/static/member/bg3.png', title:'调岗', url:'/pages/common/add?type=transfer' },
                    { bg:'/static/member/bg4.png', title:'离场', url:'/pages/common/add?type=leave' },
                ]
            },
            // 下拉选择数据
            selectData:[],
            selectPrameter:{
                smrz:'', // 人员是否认证【非必传】 
                ryzt:'', // 人员状态【非必传】
            },
            // 分页相关参数
            paging:{
                pageNum: 1,
                pageSize: this.$config.pageSize,
                keyWord: '',
            },
            page:{
                scrollTop: 0,
                status: 'nomore',
                total: 0,
                list: [], // 列表
            }
        }
    },

    onReady(){
    },

    // 页面滚动
    onPageScroll(e){
        if( e.scrollTop > 120 ){
            this.navbar.bgColor = '#21A5F3'
            this.navbar.shadow = true
        }else{
            this.navbar.bgColor = 'transparent'
            this.navbar.shadow = false
        }
        this.page.scrollTop = e.scrollTop
    },
    // 页面滚动到底部触发
    onReachBottom(){
        if( this.page.list.length < this.page.total ){
            this.paging.pageNum ++
            this.getMemberList()
        }else{
            this.page.status = 'nomore'
        }
    },

    onLoad(){
        // console.log('用户信息',this.userInfo)
        this.parameter.deptId = this.userInfo.deptId,
        this.parameter.gcbh = this.userInfo.ssgcbh,
        // 获取人员统计概况 (同首页工人情况)
        this.getHomeSsu()
        // 班组长变更信息（同首页工人分布）
        this.getHomeAtdmonth()
        // 权限判断
        this.jurisdiction()
        // 人员是否认证
        this.$tools.staffRenzhengFn(this,res=>{
            this.selectData.splice(0,1,res)
            this.selectPrameter.smrz = res.value
            // 人员状态 
            this.$tools.staffStatusFn(this,res=>{
                this.selectData.splice(1,1,res)
                this.selectPrameter.ryzt = res.value
                // 获取人员列表
                this.getMemberList()
            })
        })
    },

    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 搜索
        rightClick(){
            uni.navigateTo({ url: '/pages/common/search?type=memberPlus' })
        },

        // 人员统计概况
        getHomeSsu(){
            this.$request(this,this.$apis.HomeSsu, this.parameter).then(res=>{
                // console.log('人员统计概况',res)
                this.memberGeneral.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },

        // 考勤人数信息
        getHomeAtdmonth(){
            const parameter = JSON.parse(JSON.stringify(this.parameter))
            parameter.count = this.teamChangeFiltrate.value
            this.$request(this,this.$apis.HomeAtdmonth,parameter).then(res=>{
                // console.log('考勤人数信息',res)
                this.workerFenbu.categories = []
                this.workerFenbu.series = [
                    { name: "考勤人数", data: [] },
                    { name: "总人数", data: [] }
                ] 
                res.map((v,i)=>{
                    this.workerFenbu.categories.push(v.date)
                    this.workerFenbu.series[0].data.push(v.atdStaffs) // 实名制进场人数(文档上是考勤人数)
                    this.workerFenbu.series[1].data.push(v.staffs) // 考勤总人数(文档上是总人数)
                })
                if( this.workerFenbu.categories.length > 6 ){
                    this.workerFenbu.isOpts1 = true
                }else{
                    this.workerFenbu.isOpts1 = false
                }
            }).then()
        },
        // 班组长变更信息筛选
        teamChangeSelect(e){
            this.teamChangeFiltrate.label = e.value[0].label
            this.teamChangeFiltrate.value = e.value[0].value
            this.teamChangeFiltrate.show = false
            this.getHomeAtdmonth()
        },

        // 权限判断
        jurisdiction(){
            console.log('用户信息',this.userInfo)
            if( this.userInfo.ssgcbh != -1 && this.userInfo.terminal == 'xmd' ){
                if( this.userInfo.role == 'lzry' || this.userInfo.role == 'xmjl' ){
                    this.uses.usesShow = true
                }else{
                    this.uses.usesShow = false
                }
            }else{
                this.uses.usesShow = false
            }
        },
        // 菜单跳转
        menuSkip(item){
            uni.navigateTo({ url: item.url })
        },

        // 人员列表
        getMemberList(){
            this.page.status = 'loading'
            const parameter = Object.assign(this.parameter,this.paging,this.selectPrameter)
            this.$request(this,this.$apis.MemberList,parameter).then(res=>{
                // console.log('人员列表',res)
                this.page.total = res.total
                if( res.data.length  ){
                    this.page.status = 'loadmore'
                    res.data.map((v,i)=>{
                        this.page.list.push(v)
                    })
                }else{
                    this.page.status = 'nomore'
                    uni.$u.toast('暂未查询到更多人员列表相关数据')
                }
            }).then()
        },
        // 人员详情
        memberDetail(id){
            uni.navigateTo({ url: '/pages/member-bag/detail?id='+id })
        },
        // 下拉选择
        select(e){
            this.selectPrameter[e.type] = e.value
            this.paging.pageNum = 1
            this.page.list = []
            this.getMemberList()
        },

        // 回到顶部
        toTop(){
            uni.pageScrollTo({ scrollTop: 0 })
        },
    },
}
</script>

<style scoped lang="scss">
    .content{
        .bg{
            width: 100%;
            height: 336rpx;
            background: linear-gradient(131deg, #21A5F3 0%, #2BC4FE 100%);
        }
        // 人员概况统计
        .member-general{
            background: $uni-text-color-inverse;
            margin-top: -120rpx;
        }
        // 应用功能
        .use-item{
            width: 330rpx;
            height: 130rpx;
            position: relative;
            .img{
                margin-left: -14rpx;
            }
            .text{
                position: absolute;
                top: 46rpx;
                left: 150rpx;
            }
        } 
    }
</style>